<template>
  <div class="page_monitor-add">
    <!-- 页面title -->
    <div class="page-title">公路边坡隐患排查表单填写</div>
    <el-form ref="form" label-position="right" :model="currentRow" label-suffix="："
             label-width="200px" style="box-shadow: 0 0 10px 10px rgb(0 0 0 / 3%);">
      <el-steps :active="stepActive" space="200" simple finish-status="success">
        <el-step title="基本信息"></el-step>
        <el-step title="排查清单"></el-step>
        <el-step title="总体评价"></el-step>
      </el-steps>
      <div v-show="stepActive === 0" class="box_wrap">
        <form-base v-model="currentRow" ref="formBase" :roadList2="roadList"></form-base>
        <div class="button-foot">
          <el-button size="medium" type="primary" @click="validatorForm('formBase')" style="backgroundColor:#1990FE">下一步</el-button>
        </div>
      </div>
      <div v-show="stepActive === 1" class="box_wrap">
        <div>
          <div class="father-box">
            <el-checkbox-group v-model="selectItemId" @change="changeFatherItem">
              <el-checkbox v-for="item in checkList" :key="item.id" :label="item.id">{{item.name}}
              </el-checkbox>
            </el-checkbox-group>
          </div>
          <el-card class="box-card item-children" v-if="selectItemId.length > 0">
            <div slot="header">
              <span style="font-size: 18px">排查项目</span>
            </div>
            <el-tabs v-model="activeName" tabPosition="left">
              <el-tab-pane :name="item.name" :label="item.name" v-for="item in selectItem" :key="item.id">
                <!-- 隐患等级为一般隐患只填写各项说明 -->
<!--                <el-form-item :label="item.name + '情况描述'" prop="evaluate" v-if="currentRow.dangerLevel === 1">-->
<!--                  <el-input v-model="inputItemRemark[item.index]" type="textarea" :rows="4"-->
<!--                            placeholder=""></el-input>-->
<!--                </el-form-item>-->
                <el-checkbox-group  v-model="selectItemChildren[item.index]">
                  <el-checkbox v-for="item2 in item.item" :key="item2.id" :label="item2.id">{{item2.name}}
                  </el-checkbox>
                </el-checkbox-group>
              </el-tab-pane>
            </el-tabs>
          </el-card>
        </div>
        <div class="button-foot">
          <el-button size="medium" type="primary" plain @click="stepActive--">上一步</el-button>
          <el-button size="medium" type="primary" @click="changeChildrenItem()">下一步</el-button>
        </div>
      </div>
      <div v-show="stepActive === 2" class="box_wrap evaluate">
        <el-form-item label="总体评价" prop="evaluate">
          <el-input v-model="currentRow.evaluate" type="textarea" :rows="4" placeholder=""></el-input>
        </el-form-item>
        <div class="button-foot">
          <el-button size="medium" type="primary" plain @click="lastStep">上一步</el-button>
          <el-button class="common_btn-defalut" type="primary" @click="validateForm">提交</el-button>
        </div>
      </div>
    </el-form>
  </div>
</template>

<script>
import {
  addSlopeInvestigation,
  getSlopeInvestigateList,
  updateSlopeInvestigation
} from '@/services/model/investigation';
import ItemMixins from "./modules/item.mixins";
import FormBase from "./modules/form-base";

export default {
  components: {FormBase},
  mixins: [ItemMixins],
  data() {
    return {
      stepActive: 0,
      baseCurrentRow: {
        picList: [],
        evaluate: '',
        unitName: '',
      },
      currentRow:{
        picList: [],
        evaluate: '',
      },
      selectItem: [],
      selectItemId: [],
      checkList: [],
      selectItemChildren: [],
      inputItemRemark: [],
      activeName: '',
      unitName: '',
      userName: '',
    }
  },
  watch: {
    jumpCurrentRow(val) {
      this.currentRow = this.baseCurrentRow
      if (val) {
        this.currentRow = val
      }
    },
  },
  computed: {
    jumpCurrentRow() {
      return this.$route.params.currentRow
    },
  },
  methods: {
    //获取排查清单
    async getCheckList() {
      const {data} = await getSlopeInvestigateList()
      this.checkList = data || []
      //初始化排查项数组，通过index找到对应的选项数组
      let length = this.checkList.length
      while (length > 0) {
        this.selectItemChildren.push([])
        length--
      }
    },
    //选择内容清单
    changeChildrenItem() {
      //页面加载时，已根据chekList排查清单初始化了selectItemChildren数组
      //索引是一一对应的，根据已选的排查项数组所在索引，找到对应的排查大项，封装数据提交
      // "itemList": [  已选的排查清单
      //   {
      //     "id": "",
      //     "name": "" 大项id
      //     "item": [
      //       {
      //         "id": "",
      //          "name": "" 小项id
      //       }
      //     ]
      //   }
      // ],
      let itemList = []
      //一般隐患，不选择具体子项，填写描述
      if (this.currentRow.dangerLevel === 1) {
        this.selectItemId.map(x => {
          let fatherItem = {
            id: '',
            remark: ''
          }
          for (let i = 0; i < this.checkList.length; i++) {
            if (this.checkList[i].id === x) {
              fatherItem.id = this.checkList[i].id
              fatherItem.name = this.checkList[i].name
              fatherItem.remark = this.inputItemRemark[i]
              itemList.push(fatherItem)
            }
          }
        })
        //重大隐患需要选择具体子项
      } else if (this.currentRow.dangerLevel === 2) {
        for (let i = 0; i < this.selectItemChildren.length; i++) {
          let fatherItem = {
            id: '',
            item: []
          }
          if (this.selectItemChildren[i].length > 0) {
            fatherItem.id = this.checkList[i].id
            fatherItem.name = this.checkList[i].name
            let childrenItem = this.checkList[i].item
            this.selectItemChildren[i].map(x => {
              const it = {}
              it.id = x
              //补全名称
              childrenItem.map(child => {
                if (child.id === x) {
                  it.name = child.name
                }
              })
              fatherItem.item.push(it)
            })
            itemList.push(fatherItem)
          }
        }
      }
      this.currentRow.itemList = itemList
      this.stepActive++
    },
    lastStep() {
      //隐患等级为正常 跳过中间步骤
      if (this.currentRow.dangerLevel === 0) {
        this.stepActive--
      }
      this.stepActive--
    },
    //选择内容清单
    changeFatherItem() {
      //处理排查项选择对象
      let list = []
      //根据选择的排查大项id，展示可以选的排查项
      for (let i = 0; i < this.checkList.length; i++) {
        let item = this.checkList[i]
        if (this.selectItemId.indexOf(item.id) > -1) {
          item.index = i //为大项补充索引，用于子选项关联
          list.push(item)
        }
      }
      this.selectItem = list
      if (this.selectItem.length > 0) {
        this.activeName = this.selectItem[this.selectItem.length - 1].name
      }
    },
    // 表单提交
    validateForm() {
      this.submitData()
    },
    // 新增编辑提交数据
    async submitData() {
      // 根据ID判断使用新增还是编辑
      let action = this.currentRow.id ? updateSlopeInvestigation : addSlopeInvestigation
      let res = await action(this.currentRow)
      if (res.code === 200) {
        this.$notify({
          type: 'success',
          title: '提示',
          message: this.currentRow.id ? '修改成功' : '添加成功'
        })
        this.$nextTick(() => {
          this.$refs.formBase.$refs.form.clearValidate()
        })
        this.stepActive = 0
        this.currentRow = JSON.parse(JSON.stringify(this.baseCurrentRow))
      }
    },
    // 新增数据
    handleAdd() {
      this.$nextTick(() => {
        this.$refs.formBase.$refs.form.clearValidate()
      })
      this.currentRow = JSON.parse(JSON.stringify(this.baseCurrentRow))
      const {currentRow} = this.$route.params
      if (currentRow) {
        this.currentRow = currentRow
        let itemList = this.currentRow.itemList
        //初始化排查子项
        let selectItemChildren = []
        let length = this.checkList.length
        while (length > 0) {
          selectItemChildren.push([])
          length--
        }
        //初始化已选排查大项
        let selectItem = []
        let selectItemId = []
        let inputItemRemark = []
        if (this.currentRow.dangerLevel !== 0) {
          itemList.map(item => {
            for (let i = 0; i < this.checkList.length; i++) {
              if (item.id === this.checkList[i].id) {
                this.checkList[i].index = i
                selectItem.push(this.checkList[i])
                selectItemId.push(item.id)
                if (this.currentRow.dangerLevel === 2) {
                  selectItemChildren[i] = item.item.map(x => {
                    return x.id
                  })
                }
                inputItemRemark[i] = item.remark
              }
            }
          })
          this.activeName = selectItem[0].name
        }
        this.selectItem = selectItem
        this.selectItemId = selectItemId
        this.selectItemChildren = selectItemChildren
        this.inputItemRemark = inputItemRemark
        this.isShowDialog = true
      }
    },
    // 表单校验
    validatorForm(name) {
      this.$refs[name]._validatorForm().then((res) => {
        if (this.currentRow.dangerLevel === 0) {
          this.stepActive++
        }
        this.stepActive++
      })
    },
    //选择路线
    changeRoad() {
      this.$set(this.form, 'roadSectionId', ''); //强制刷新 https://blog.csdn.net/PGguoqi/article/details/90240650
      this.bidSectionList = []
      const {roadId} = this.form
      this.getBidSectionList(roadId)
    },
  },
  created() {
    this.getRoadList();
    this.getCheckList();
  },
  mounted() {

  },
  activated() {
    this.handleAdd()
    this.currentRow.userName = this.$store.state.userInfo.userName
    this.currentRow.unitName = this.$store.state.userInfo.unitName
    // // 查询单位类型

  }
}
</script>
<style lang="less" scoped>

  .page_monitor-add {
    width: 1200px;
    margin: 0 auto;
    box-shadow: 2px 2px solid;
.el-form{

  .el-steps{
    /deep/.el-step__title.is-process{
      color: #1990FE !important;
    }
  }
}
    .page-title {
      margin-bottom: 50px;
      padding: 28px;
      font-size: 30px;
      line-height: 18px;
      text-align: center;
      color: white;
      font-weight: 600;
      background-color: #1990FE !important;
      border-radius: 20px;
    }
  }

  .s-white {
    color: #FFFFFF;
  }

  .father-box {
    margin-left: 20px;

    /deep/ .el-checkbox__label {
      width: 140px;
      display: inline-block;
      padding-left: 10px;
      line-height: 19px;
      font-size: 16px;
      margin-top: 6px;
    }

    /deep/ .el-checkbox {
      width: 170px;
      line-height: 38px;
    }
  }

  .geology {
    font-size: 20px;
    border-bottom: 1px solid;
    margin-bottom: 10px;
    margin-top: 20px;
  }

  .geology-children {
    font-size: 15px;
    border-bottom: 1px solid;
    margin-bottom: 20px;
    margin-top: 20px;
    margin-left: 20px;
  }

  .el-steps--simple {
    margin-bottom: 20px;
  }

  .item-children {
    margin-top: 20px;

    /deep/ .el-form-item__content {
      margin-left: 0px !important;
    }

    /deep/ .el-tabs__item {
      font-size: 20px;
    }

    /deep/ .el-checkbox__label {
      font-size: 18px;
      line-height: 35px;
    }

    /deep/ .el-checkbox {
      display: block;
    }

    /deep/ .el-tabs__item.is-active {
      background-color: #e0e0e0;
      font-size: 20px;
      font-weight: 600;
    }
  }

  .button-foot {
    margin-top: 10px;
    text-align: center;
    padding: 10px;
  }

</style>
